<template>
  <div class="order">
      <h4>运输管理>待配配送运单</h4>
      <div class="filter-box" style="padding: 30px;
            background: #fff;
            border: 1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0">
                <div style="overflow:hidden">
                        <div class="demo-input-suffix">
                            订单编号：
                            <el-input clearable
                                placeholder="请输入订单编号"
                                v-model="orderNum" class="filter-input"
                                @keyup.enter.native="searchOrder()">
                            </el-input>
                        </div>
                        <!-- <div class="demo-input-suffix">
                            <span style="display:inline-block;margin-right:12px;"> 目的地：</span>  
                            <el-select clearable v-model="startSite" placeholder="请选择省" style="margin-left:10px;">
                                <el-option
                                v-for="item in siteSelected"
                                :key="item.value"
                                :label="item.siteName"
                                :value="item.id">
                                </el-option>
                             </el-select> 
                             <el-select clearable v-model="startSite" placeholder="请选择市" style="margin-left:5px;">
                                <el-option
                                v-for="item in siteSelected"
                                :key="item.value"
                                :label="item.siteName"
                                :value="item.id">
                                </el-option>
                             </el-select>
                             <el-select clearable v-model="startSite" placeholder="请选择区" style="margin-left:5px;">
                                        <el-option
                                        v-for="item in siteSelected"
                                        :key="item.value"
                                        :label="item.siteName"
                                        :value="item.id">
                                        </el-option>
                             </el-select>
                        </div>
                        <div class="demo-input-suffix">
                            收货人：
                            <el-input clearable
                                placeholder="请输入手机号码"
                                v-model="receiveTel" class="filter-input"
                                @keyup.enter.native="searchOrder()">
                            </el-input>
                        </div>
                        <div class="demo-input-suffix">
                            运输员：
                             <el-select clearable v-model="startSite" placeholder="请选择区">
                                        <el-option
                                        v-for="item in siteSelected"
                                        :key="item.value"
                                        :label="item.siteName"
                                        :value="item.id">
                                        </el-option>
                             </el-select>
                        </div> -->
                        <div class="demo-input-suffix">
                            收货人手机号：
                            <el-input clearable
                                placeholder="请输入手机号码"
                                v-model="receiveTel" class="filter-input"
                                @keyup.enter.native="searchOrder()">
                            </el-input>
                        </div>
                        <div class="demo-input-suffix">
                            运输员手机号：
                            <el-input clearable
                                placeholder="请输入手机号码"
                                v-model="transUserTel" class="filter-input"
                                @keyup.enter.native="searchOrder()">
                            </el-input>
                        </div>
                         <el-button type="primary" @click="searchOrder()" >搜索</el-button>
                    </div>
                 
       </div>  
       <div class="container" style="border-radius: 0 0 5px 5px ">
                <!-- <template slot-scope="scope"> -->
                    <el-button size="mini" type="primary" @click="batchHandle">批量操作</el-button>   
                <!-- </template> -->
                <span>(不支持跨页)</span>    
                <el-table v-loading="loading" :data="data" border style="width: 100%;margin-top:20px;" ref="multipleTable" stripe
                      @selection-change="select" @cell-click="updateDeliver" >
                 <el-table-column type="selection" width="55" align="center"></el-table-column>
                 <el-table-column type="index"  width="50" label="序号" align="center" :index="indexMethod"></el-table-column>
                 <el-table-column prop="orderId" label="订单编号"  align="center" ></el-table-column>
                 <el-table-column prop="receiveMan" label="收货人" align="center" width="120">
                </el-table-column>
                 <el-table-column prop="receiveTel" label="联系方式" align="center" width="140">
                </el-table-column>
                 <el-table-column prop="caseNum" label="数量" align="center" width="60">
                </el-table-column>
                <el-table-column prop="transUserName" label="运输员" align="center">
                <el-table-column prop="createOrderTime" label="下单时间" align="center" fit show-overflow-tooltip >
                </el-table-column>     
                </el-table-column>
                 <el-table-column prop="transUserTel" label="运输员手机号" align="center" width="140">
                </el-table-column>
                <el-table-column prop="endLocation" label="目的地" align="center" width="150px" show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="操作"  align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="allot( scope.row.id )">分配配送员</el-button>     
                </template>
                </el-table-column>
            </el-table>
             <div class="pagination">
                  <el-pagination
                     @size-change="handleSizeChange"
                    @current-change="getPageNum"
                    :page-sizes="[10, 20, 50,100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                 </el-pagination>
           </div>
      </div>
      <!-- 分配运输员的模态框 -->
      <el-dialog title="分配配送员" :visible.sync="dialogFormVisible" width="30%" top="30vh">
        <el-form :model="form"  :rules="rules" ref="ruleForm">
            <el-form-item  prop="region" label="选择配送员" :label-width="formLabelWidth">
                <el-select   v-model="form.region" placeholder="请选择配送员">
                    <el-option v-for="item in deliveryList" :key="item.id"  :label="item.realName" :value="item.tel"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary"  @click="selectDeliver('ruleForm')">确 定</el-button>
        </div>
     </el-dialog>
  </div>
</template>

<script>
import {
  Required_delivery,
  order_deliver,
  get_deliver_all,
  select_deliver
} from "@/request/api";
export default {
  data() {
    return {
      loading: true,
      data: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      orderNum: "", // 订单编号
      transUserTel: "", // 运输员手机号
      receiveTel: "", //  收货人手机号
      startSite: "",
      distSite: "",
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        region: ""
      },
      rules: {
        region: [{ required: true, message: "请选择配送员", trigger: "change" }]
      },
      batchArr: [],
      deliveryList: [], // 配送员 下拉框
      isBatch: false,
      id: "",
      updateDeliverDetail: {},
      siteSelected:[1,2,3,4],//目的地的数据
      arraayList:[],//存放数据（根据目的地操作）
    };
  },
  created() {
    this.get_Required_delivery();
  },
  methods: {
    updateDeliver(row) {
      console.log(row.id);
      console.log(row.transUserName);
    },
    indexMethod(index) {
      return index + 1 + (this.pageNum - 1) * pageSize;
    },
    searchOrder() {
      this.get_Required_delivery();
    },
    getPageNum(e) {
      this.pageSize = e;
      this.get_Required_delivery();
    },
    handleSizeChange(e){
      this.pageSize = e;
      this.get_Required_delivery();
    },
    selectDeliver(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.isBatch) {
            //    批量操作
            select_deliver({
              orderFarmerIdStr: this.batchArr.join(","),
              deliveryUserId: this.form.region
            }).then(res => {
              if (res.code == 1) {
                this.dialogFormVisible = false;
                this.$message({
                  type: "success",
                  message: "分配成功"
                });
                this.get_Required_delivery();

              }
            });
          } else {
            //   单个操作
            select_deliver({
              orderFarmerIdStr: this.id,
              deliveryUserId: this.form.region
            }).then(res => {
              if (res.code == 1) {
                this.dialogFormVisible = false;
                this.$message({
                  type: "success",
                  message: "分配成功"
                });
                this.get_Required_delivery();
                // this.$router.push({
                //     path:'/waybill_2'
                // })
              }
            });
          }
        } else {
          this.$message({
            type: "info",
            message: "请选择配送员"
          });
        }
      });
    },
    batchHandle(id) {
      
      if (this.batchArr.length == 0) {
        alert("请选择一项");
      } else {
        if(this.batchArr.length>=1){
          console.log(2,this.batchArr)
            this.id=this.batchArr[0];
           for(var i=0;i<this.arraayList.length;i++){
            if(this.arraayList[0].districtId!=this.arraayList[i].districtId){
                alert('目的地不一致')
                this.dialogFormVisible = false;
                return;
            }else{
              this.get_order_deliver();
              this.dialogFormVisible = true;
              this.isBatch = true;
            }
          }
        }else{
            this.get_order_deliver();
            this.dialogFormVisible = true;
            this.isBatch = true;
        }
        
        
      }
    },
    allot(id) {
      this.dialogFormVisible = true;
      this.isBatch = false;
      this.id = id;
      this.get_order_deliver();
    },
    select(selection, row) {
      console.log(123,selection)
      this.arraayList=selection
      this.batchArr = selection.map(v => {
        return v.id;
      });
      // this.id= selection.map(v => {
      //   return v.id;
      // });
    },
    get_Required_delivery() {
      Required_delivery({
        orderId: this.orderNum, // 订单编号
        districtId: "",
        receiveMan: "",
        transUserId: "",
        transUserTel: this.transUserTel, // 运输员电话
        receiveTel: this.receiveTel, // 收货人电话
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.loading = false;
        this.data = res.rows;
        this.total = res.total;
      });
    },
    get_order_deliver() {
     // alert(this.id)
      get_deliver_all({
        id: this.id
      }).then(res => {
        if (res.code == 1) {
          console.log(1,res)
          this.deliveryList = res.data;
          console.log(this.deliveryList);
        }
      });
    },
    
  }
};
</script>
<style  scoped>
.order > h4 {
  line-height: 22px;
  border-left: 5px solid rgb(32, 160, 255);
  font-size: 16px;
  color: #666;
  padding-left: 10px;
  font-size: 18px;
  margin-bottom: 20px;
}
.handle-box {
  margin-bottom: 20px;
}
.filter-input {
  width: 200px;
  display: inline-block;
}
.demo-input-suffix{
    float:left;
    width:32%;
    margin-bottom:20px;
}
</style>